<template>
  <div class="pdf-container">
    <VuePdfApp :pdf="internalPdfSource" :config="config" :style="viewerStyle" @pages-rendered="onPagesRendered" />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import VuePdfApp from 'vue3-pdf-app'
import 'vue3-pdf-app/dist/icons/main.css'
// import VuePdfEmbed from 'vue-pdf-embed'


const props = defineProps({
  pdfSource: {
    type: [String, Object],
    required: true
  }
})

const viewerStyle = ref({
  width: '100%',
  // height: 'calc(100vh - 40px - 64px)';
  height: 'calc(100vh - 64px)'
})

const internalPdfSource = ref(null)

const config = ref({
  sidebar: {
    viewThumbnail: true,
    viewOutline: true,
    viewAttachments: false,
  },
  secondaryToolbar: {
    secondaryPresentationMode: true,
    secondaryOpenFile: false,
    secondaryPrint: true,
    secondaryDownload: true,
    secondaryViewBookmark: true,
    firstPage: false,
    lastPage: false,
    pageRotateCw: true,
    pageRotateCcw: true,
    cursorSelectTool: false,
    cursorHandTool: false,
    scrollVertical: false,
    scrollHorizontal: false,
    scrollWrapped: false,
    spreadNone: false,
    spreadOdd: false,
    spreadEven: false,
    documentProperties: false,
  },
  toolbar: {
    toolbarViewerLeft: {
      findbar: false,
      previous: true,
      next: true,
      pageNumber: true,
    },
    toolbarViewerRight: {
      presentationMode: true,
      openFile: false,
      print: true,
      download: true,
      viewBookmark: false,
    },
    toolbarViewerMiddle: {
      zoomOut: true,
      zoomIn: true,
      scaleSelectContainer: false,
    },
  },
  errorWrapper: true,
})

const onPagesRendered = () => {
  console.log('PDF渲染完成')
}

// 处理PDF源
const processPdfSource = (source) => {
  console.log("pe86", source);

  if (!source) {
    internalPdfSource.value = null;
    return;
  }

  if (typeof source === 'string') {
    // 如果是URL字符串，直接使用
    internalPdfSource.value = source;
  } else if (source instanceof File || source instanceof Blob) {
    // 如果是文件对象，创建对象URL
    internalPdfSource.value = URL.createObjectURL(source);
  } else {
    console.error('不支持的PDF源类型:', typeof source);
    internalPdfSource.value = null;
  }
}

// 监听props变化
watch(() => props.pdfSource, (newValue) => {
  console.log("ep102",props.pdfSource);
  
  processPdfSource(newValue);
}, { immediate: true });
</script>

<style scoped>
.pdf-container {
  overflow: hidden;
  margin-top: -33px;
}

.pdf-app.light {
  --pdf-app-background-color: #F2F3F5;
}

</style>